@background: #040e29;
@border: #0b386b;
.vwidth(@width) {
    width: (@width/19.2) * 1vw;
}

.vheight(@height) {
    height: (@height/10.8) * 1vh;
}

.pxvw(@prop, @value) {
    @{prop}: (@value/19.2) * 1vw;
}

.flex-box {
    display: flex;
    box-sizing: border-box;
    &__item {
        flex: 1;
    }
}

.wrapper {
    flex-direction: column;
    box-sizing: border-box;
    width: 100vw;
    height: 100vh;
    padding: 20px 30px;
    background: @background;
}

.head {
    margin: 0 auto 10px auto;
    .vheight(95);
}

.app {
    flex: 1;
    justify-content: space-between;
    position: relative;
    &__side {
        flex-direction: column;
        justify-content: space-between;
        .vwidth(474);
    }
    &__center {
        flex-direction: column;
        justify-content: space-between;
        .vwidth(810);
    }
    &__block {
        position: relative;
        border: 2px solid @border;
        &_sm {
            overflow: hidden;
            text-align: center;
            border-radius: 4px;
            .vheight(287);
            .vwidth(474);
        }
        &_lg {
            position: relative;
            box-sizing: border-box;
            .vheight(854);
            .vwidth(810);
        }
        &-wrapper {
            overflow: hidden;
            width: 100%;
            height: 100%;
        }
        &-title {
            position: relative;
            z-index: 20;
            display: inline-block;
            .pxvw(width, 214);
            .pxvw(height, 40);
            text-align: center;
            color: #00b2f5;
            .pxvw(font-size, 20);
            line-height: 1.7;
            &::after {
                position: absolute;
                z-index: -1;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                content: "";
                transform: perspective(1.5em) rotateX(-5deg);
                transform-origin: top;
                border: 1px solid @border;
                border-top: none;
                background: #071743;
                box-shadow: 0 0 1em @border inset;
            }
        }
        &-content {
            height: calc((287/10.8) * 1vh - 2.083vw);
        }
        &-dcr {
            position: absolute;
            right: 0;
            bottom: 0;
            background: #2facd7;
            &_right {
                .pxvw(width, 3);
                .pxvw(height, 20);
                transform: skewY(45deg);
            }
            &_bottom {
                .pxvw( width, 16);
                .pxvw( height, 3);
                .pxvw(width, 16);
                .pxvw(height, 3);
                transform: skewX(135deg);
            }
            &_thin {
                .pxvw( right, 6);
                .pxvw( bottom, 6);
                .pxvw( width, 11);
                .pxvw( height, 15);
                border-right: 1px solid #154d6f;
                border-bottom: 1px solid #154d6f;
                background: transparent;
            }
        }
        &-corner {
            position: absolute;
            z-index: 999;
            display: block;
            .pxvw( width, 20);
            .pxvw( height, 20);
            border-style: solid;
            border-color: #6fc5c0;
            &_top-left {
                top: -2px;
                left: -2px;
                border-width: 2px 0 0 2px;
            }
            &_top-right {
                top: -2px;
                right: -2px;
                border-width: 2px 2px 0 0;
            }
            &_bottom-right {
                right: -2px;
                bottom: -2px;
                border-width: 0 2px 2px 0;
            }
            &_bottom-left {
                bottom: -2px;
                left: -2px;
                border-width: 0 0 2px 2px;
            }
        }
    }
    &__desc {
        position: absolute;
        bottom: 0;
        left: 0;
        box-sizing: border-box;
        width: 100%;
        .pxvw( height, 124);
        padding: 23px 37px 18px 37px;
        background: #0f1330;
        &-title {
            color: #00adef;
            .pxvw( font-size, 24);
        }
        &-content {
            width: 45%;
            color: #01a6e6;
            .pxvw( font-size, 10);
        }
        &-time {
            box-sizing: border-box;
            background: url('./images/weatherBg.png') center no-repeat;
            background-size: contain;
            .pxvw( width,
            251);
            .pxvw( height,
            88);
            padding: 10px 25px;
            color: #fff;
            position: relative;
            &_split {
                .pxvw( font-size,
                9);
                line-height: 1;
            }
            &_time {
                .pxvw( font-size,
                38);
                line-height: 1;
            }
            &_date {
                text-align: right;
                .pxvw( font-size,
                10);
                line-height: 1;
            }
        }
    }
    &__company-info {
        position: relative;
        .pxvw( height,
        40);
        text-align: center;
        background: url('./images/company.png') center no-repeat;
        background-size: contain;
        color: #00f6ff;
        .pxvw( font-size,
        20);
        .pxvw( line-height,
        40);
        .vwidth(810);
    }
}

.daily-sta {
    display: flex;
}

.sta-list {
    width: 70%;
    margin: 0 auto;
    &-item {
        display: flex;
        line-height: 2;
        &__label {
            display: inline-block;
            flex: 1;
            text-align: left;
            color: #13c2c2;
        }
        &__number {
            display: inline-block;
            flex: 1;
            text-align: right;
            color: #fa8c16;
        }
    }
}

.daily-sta {
    position: relative;
    width: 100%;
    height: 100%;
    &__lg {
        position: absolute;
        top: 0;
        left: 0;
        width: 60%;
        height: 100%;
    }
    &__total {
        position: absolute;
        .pxvw( top,
        26);
        right: -20px;
        box-sizing: border-box;
        width: 40%;
        height: 50%;
        text-align: left;
        color: #fff;
        &-title {
            .pxvw( font-size,
            14);
        }
        &-number {
            .pxvw( font-size,
            24);
        }
    }
    &__sm {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 50%;
        height: 50%;
    }
}

.temp {
    .vheight(377);
    .vwidth(850);
}

.site-user {
    .vheight(377);
    .vwidth(850);
    padding: 20px 40px;
    box-sizing: border-box;
    flex-direction: column;
    background: url('./images/bgin.png')center no-repeat, url('./images/bgout.png') center no-repeat;
    background-size: contain;
    position: relative;
    &__title {
        .pxvw(font-size,
        29);
        color: #00B9FF;
        align-items: top;
    }
    &__top{
      position: absolute;
      top: 20px;
      right: 40px;
      z-index: 2048;
    }
    &__content {
        flex: 1;
        align-items: stretch;
    }
    &__sta {
        color: #fff;
        .vwidth(125);
        flex-direction: column;
        justify-content: space-between;
        &-row {
            align-items: center;
            &-title {
                white-space: nowrap;
                .pxvw(font-size,
                8);
            }
            &-content {
                .pxvw(font-size,
                24);
            }
        }
    }
    &__icon {
        .pxvw(width,
        25);
        .pxvw(height,
        25);
        .pxvw(margin-right,
        13);
        &_lg {
            .pxvw(width,
            30);
            .pxvw(height,
            30);
            .pxvw(margin-right,
            10);
        }
    }
}

.detail-block {
    .vheight(287);
    .vwidth(474);
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: 1024;
    background: @background;
    justify-content: space-around;
    transition: all ease-in-out 0.5s;
    box-sizing: border-box;
    flex-direction: column;
    justify-content: space-around;
    &__row {
        justify-content: space-around;
    }
    &__left {
        left: 15vw;
        top: 33%;
        &_active {
            opacity: 1;
            width: 100vw;
            height: 100%;
            left: -30px;
            top: 0;
            bottom: 0;
        }
    }
    &__right {
      right: 15vw;
      top: 17%;
      &_active {
          opacity: 1;
          width: 100vw;
          height: 100%;
          right: -30px;
          top: 0;
          bottom: 0;
      }
  }
}

.weather-icon(31);
.weather_base {
    .pxvw(width,
    60);
    .pxvw(height,
    60);
    background-size: contain;
    position: absolute;
    .pxvw(top,
    -10);
    .pxvw(right,
    36);
    z-index: 64;
}

.weather-icon(@n,
@i: 0) when (@i <=@n) {
    .weather-@{i} {
        background: url('./images/weather/@{i}.png') center no-repeat;
        .weather_base;
    }
    .weather-icon(@n,
    (@i+1))
}

.weather-53 {
    background: url('./images/weather/53.png') center no-repeat;
    .weather_base;
}

.top3 {
    background: #091639;
    box-sizing: border-box;
    .pxvw(padding,
    10);
    .pxvw(margin-right,20);
    .pxvw(border-radius,6);
    &__icon {
        .pxvw(width,
        5);
        .pxvw(height,
        12);
        .pxvw(border-radius,
        3);
        background-size: cover;
    }
    &__title {
        .pxvw(font-size,
        12);
        .pxvw(line-height,
        12);
        .pxvw(margin-left,
        5);
        font-style: italic;
        color: #fff;
        .pxvw(margin-bottom, 8);
    }
    &__list {
        .pxvw(font-size,
        10);
        -webkit-margin-before: 0;
        -webkit-margin-after: 0;
        -webkit-margin-start: 0;
        -webkit-margin-end: 0;
        .pxvw(-webkit-padding-start, 26);
        &-item {
            color: #C5EBFF;
        }
        &-text {
            color: #00B9FF;
        }
    }
}